import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import Css from '../../../assets/css/user/myfav/index.css';
import {Toast,Modal} from "antd-mobile";
import request from "../../../assets/js/utils/request";
import UpRefresh from "../../../assets/js/libs/uprefresh";
import {lazyImg,GoPagePush} from '../../../assets/js/utils/index'
class myfavIndex extends React.Component{
    constructor(){
        super();
        this.state={
            aFav:[]
        }
        this.oUpRefresh=null;
        this.curPage=1;
        this.maxPage=0;
        this.offsetBottom=100;
    }
    componentDidMount(){
        this.getDataMyFav()
    }
    getDataMyFav(){
        let sUrl=window.base.config.baseUrl+'/user/fav/index?uid='+this.props.state.redLogin.uid+'&token='+window.base.config.token+'&page='+this.curPage;
        request(sUrl,'get').then(res=>{
            if (res.code===200){
                this.maxPage=res.pageinfo.pagenum;
                this.setState({aFav:res.data},()=>{
                    this.getScrollPage()
                    lazyImg()
                })
            }else {
                Toast.info(res.data,1)
            }
        })
    }
    //获取分页数据
    getScrollPage(){
        this.oUpRefresh=new UpRefresh({"curPage":this.curPage,"maxPage":this.maxPage,"offsetBottom":this.offsetBottom},curPage=>{
            let sUrl=window.base.config.baseUrl+'/user/fav/index?uid='+this.props.state.redLogin.uid+'&token='+window.base.config.token+'&page='+curPage;
            request(sUrl,'get').then((res)=>{
                console.log(res)
                if(res.code===200){
                    let temAFav=this.state.aFav;
                    if (res.data.length>0){
                        for (let i in res.data){
                            temAFav.push(res.data[i]);
                        }
                    }
                    this.setState({aFav:temAFav},()=>{
                        lazyImg()
                    });
                }
            })
        });
    }
    //点击购买
    goPage(url){
        GoPagePush(this.props,url)
    }
    //点击删除
    delectDataMyFav(index,fid){
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>{
                    let sUrl=window.base.config.baseUrl+'user/fav/del?uid='+this.props.state.redLogin.uid+'&fid='+fid+'&token='+window.base.config.token;
                    request(sUrl,'post').then(res=>{
                        if (res.code===200){
                            let temAFav=this.state.aFav
                            temAFav.splice(index,1)
                            this.setState({aFav:temAFav},()=>{
                                lazyImg()
                            })
                        }else {
                            Toast.info(res.data,1)
                        }
                    })
                }
            },

        ]);


    }
    //解决内存泄漏
    componentWillUnmount(){
        this.setState=(state,callback)=>{
            return ;
        }
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'我的收藏'} ></HeadNavComponent>
                <div className={Css['fav_ul']}>
                    <ul>
                        {
                            this.state.aFav.length>0?
                                this.state.aFav.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <div className={Css['fav_ul_img']}><img src={require('../../../assets/images/commen/lazyImg.jpg')} data-echo={item.image} alt={item.title} /> </div>
                                            <div className={Css['fav_ul_title']}>{item.title}</div>
                                            <div className={Css['fav_ul_price']}>￥{item.price}</div>
                                            <div className={Css['fav_ul_btn']}>
                                                <p onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.gid)}>购买</p>
                                                <p onClick={this.delectDataMyFav.bind(this,index,item.fid)}>删除</p>
                                            </div>
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(myfavIndex)
